<nz-drawer [nzClosable]="false" [nzVisible]="visible" nzPlacement="right" nzWidth="500px" nzTitle="设备维保计划"
           [nzFooter]="footerTpl"
           (nzOnClose)="close()">

  <nz-spin [nzSpinning]="nzLoading">
    <form nz-form nzLayout="vertical" nz-row [nzGutter]="15" [formGroup]="validateForm" (ngSubmit)="submitForm()">

      <nz-form-item nz-col nzSpan="12">
        <nz-form-label nzFor="code"> 计划单号</nz-form-label>
        <nz-form-control nzErrorTip="Please input code!">
          <input nz-input nzSize="small" id="code" formControlName="code" [readOnly]="isUpdate" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-col nzSpan="12">
        <nz-form-label nzFor="name"> 计划名称</nz-form-label>
        <nz-form-control nzErrorTip="Please input name!">
          <input nz-input nzSize="small" id="name" formControlName="name" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-col nzSpan="12">
        <nz-form-label nzFor="device"> 维保设备</nz-form-label>
        <nz-form-control>
          <nz-select nzShowSearch nzSize="small" nzAllowClear nzPlaceHolder="Select a status"
                     formControlName="deviceId" id="device">
            <nz-option *ngFor="let item of devices" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-col nzSpan="12">
        <nz-form-label nzFor="maintainType"> 养护类型</nz-form-label>
        <nz-form-control>
          <nz-select nzShowSearch nzSize="small" nzAllowClear nzPlaceHolder="Select a status"
                     formControlName="maintainType" id="maintainType">
            <nz-option *ngFor="let item of deviceMaintainType" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-col nzSpan="12">
        <nz-form-label nzFor="cycle"> 保养周期</nz-form-label>
        <nz-form-control>
          <input nz-input nzSize="small" id="cycle" formControlName="cycle" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-col nzSpan="12">
        <nz-form-label nzFor="corn"> corn表达式</nz-form-label>
        <nz-form-control>
          <input nz-input nzSize="small" id="corn" formControlName="corn" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-col nzSpan="12">
        <nz-form-label nzFor="user"> 责任人</nz-form-label>
        <nz-form-control nzErrorTip="Please input your roleName!">
          <nz-select nzShowSearch nzAllowClear nzSize="small" nzPlaceHolder="Select a status" formControlName="userId" id="user">
            <nz-option *ngFor="let item of users" [nzLabel]="item.username" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item nz-col nzSpan="12">
        <nz-form-label nzFor="planStartTime">维保区间</nz-form-label>
        <nz-form-control nzErrorTip="Please input your roleName!">
          <nz-range-picker nzSize="small" id="plan_start_time" formControlName="planDate" [nzFormat]="dateFormat"
                           [nzMode]="'date'"
                           (ngModelChange)="onChange($event)"></nz-range-picker>
        </nz-form-control>
      </nz-form-item>

    </form>
  </nz-spin>

  <ng-template #footerTpl>
    <div style="float: right">
      <button nz-button style="margin-right: 8px;" (click)="close()">取消</button>
      <button nz-button nzType="primary" (click)="submitForm()">保存</button>
    </div>
  </ng-template>
</nz-drawer>
